<template>
  <div class="root">
     <div class="center">安全中心</div>
     <div class="rong">
        <div>
            <span>自动拨号</span>
            <input v-model="auto"/>
            <button :style="{ backgroundColor: buttonColor }" @click="btn">{{ isauto ? "已配置" : '配置' }}</button>
        </div>
     </div>
    
  </div>
</template>

<script>
export default {
    data() {
        return {
          buttonColor: 'rgb(22,155,231)',
          isauto:false,
          auto:''
        }
    },
    methods: {
        btn(){
            //原始的
            if(this.auto.length > 0) {
                this.isauto = true
                this.buttonColor = 'rgb(0,188,140)'
            }else{
                if(!this.isauto){
                    alert('自动拨号内容不能为空')
                }
            }
        }
    }
}
</script>

<style scoped lang="scss">
    .root{
        width:100vi;
        height: 80vh;
        background-color: whitesmoke;
        padding: 24px 50px 20px 50px;
        .center{
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .rong{
            width: 85%;
            height: 40vh;
            // background-color: skyblue;
            margin: 45px 0 0 11px;
            div{
                width: 100%;
                height: 43px;
                // background-color: slateblue;
                display: flex;
                align-items: center;
                span{
                font-size: 15px;
                letter-spacing: 1px;
                }
                input{
                    width: 87%;
                    height: 38px;
                    border:1px solid rgb(200,200,200)
                }
                button{
                    width: 90px;
                    height:38px;
                    margin-left: 8px;
                    border-radius: 5px;
                    color: white;
                    // background-color: rgb(22,155,231);
                    border: none;
                }
            }
        }
    }
    
</style>